<template>
  <v-app id="inspire">
    <v-navigation-drawer
      :clipped="$vuetify.breakpoint.lgAndUp"
      v-model="drawer"
      fixed
      app
    >
      <v-list dense>
        <template v-for="item in appMenu">
          <v-layout v-if="item.heading" :key="item.heading" row align-center>
            <v-flex xs6>
              <v-subheader v-if="item.heading">
                {{ item.heading }}
              </v-subheader>
            </v-flex>
            <v-flex xs6 class="text-xs-center">
              <!-- <a href="#!" class="body-2 black--text">EDIT</a> -->
            </v-flex>
          </v-layout>
          <v-list-group v-else-if="item.children" v-model="item.model" :key="item.text" :prepend-icon="item.model ? item.icon : item['icon-alt']" append-icon="" >
            <v-list-tile slot="activator">
              <v-list-tile-content>
                <v-list-tile-title>
                  {{ item.text }}
                </v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
            <v-list-tile v-for="(child, i) in item.children" :key="i" @click="routeTo(child)" >
              <v-list-tile-action v-if="child.icon">
                <v-icon color="primary">{{ child.icon }}</v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title>
                  {{ child.text }}
                </v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
          </v-list-group>
          <v-list-tile v-else :key="item.text" @click="routeTo(item)">
            <v-list-tile-action v-if="item.icon">
              <v-icon color="primary">{{ item.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>
                {{ item.text }}
              </v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </template>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar :clipped-left="$vuetify.breakpoint.lgAndUp" color="blue darken-3" dark app @keyup.enter="submit" fixed>
      <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
        <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
        <span class="hidden-sm-and-down">{{appName}}</span>
      </v-toolbar-title>
      <!-- <v-text-field
        flat
        solo-inverted
        prepend-icon="search"
        label="Search"
        class="hidden-sm-and-down"
      ></v-text-field> -->
      <v-spacer></v-spacer>
      <v-btn icon @click="quit">
        <v-icon>exit_to_app</v-icon>
      </v-btn>
      <!-- <v-btn icon>
        <v-icon>notifications</v-icon>
      </v-btn> -->
      <!-- <v-btn icon large>
        <v-avatar size="32px" tile>
          <img
            src="https://vuetifyjs.com/static/doc-images/logo.svg"
            alt="Vuetify"
          >
        </v-avatar>
      </v-btn> -->
    </v-toolbar>
    <v-content>
        <transition name="fade" mode="out-in">
            <router-view></router-view>
        </transition>
    </v-content>
  </v-app>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  data: () => ({
    dialog: false,
    drawer: null,
    items: [
      {icon: 'contacts', text: 'Contacts'},
      {icon: 'history', text: 'Frequently contacted'},
      {icon: 'content_copy', text: 'Duplicates'},
      {
        icon: 'keyboard_arrow_up',
        'icon-alt': 'keyboard_arrow_down',
        text: 'Labels',
        model: true,
        children: [{icon: 'add', text: 'Create label'}]
      },
      {
        icon: 'keyboard_arrow_up',
        'icon-alt': 'keyboard_arrow_down',
        text: 'More',
        model: false,
        children: [{text: 'Import'}, {text: 'Export'}, {text: 'Print'}, {text: 'Undo changes'}, {text: 'Other contacts'}]
      },
      {icon: 'settings', text: 'Settings'},
      {icon: 'chat_bubble', text: 'Send feedback'},
      {icon: 'help', text: 'Help'},
      {icon: 'phonelink', text: 'App downloads'},
      {icon: 'keyboard', text: 'Go to the old version'}
    ]
  }),
  methods: {
    routeTo(mi) {
      this.$router.push({name: mi.uri})
    },
    quit() {
      sessionStorage.clear()
      this.$router.replace({name: 'login'})
    }
  },
  props: {
    source: String
  },
  computed: {
    ...mapGetters(['appName', 'appMenu'])
  },
  mounted() {
    console.log('[Index] mounted()')
  }
}
</script>